$(document).ready(function(){
    getAjax(global.apiUrl+'/admin_get_shop_class',function(res){
        console.log(res)
        var html = `<option>选择商品类别</option>`;
        for(var i=0;i<res.length;i++){
            html += `
            <option value="${res[i].id}">${res[i].shop_classname}</option>
            `
        }
        $('#goods-type').html(html);
    })



    /*
    * 缩略图上传时间
    */
    var fileInput = document.getElementById("top-img"),
        fileImage = document.getElementById("top-img-box");
    //监听change事件
    var arr=[]
    fileInput.addEventListener('change',function(e){
        //清空预览区图片
        fileImage.innerHTML = '';
        //获取file的引用
        var file = fileInput.files;
        console.log(file);
        // arr.push(file);
        // console.log(arr);
        // console.log(arr[0][0]);
        var img = ' ';
        //读取文件
        for(var i=0,file=fileInput.files;i<file.length;i++){
            var reader = new FileReader();
            reader.onload = function(e){
                console.log(e);
                var data = e.target.result;
                console.log(e.target)
                var img = document.createElement("img");
                img.src=data;
                fileImage.appendChild(img)
            }
            // 以DataURL的形式读取文件:
            reader.readAsDataURL(file[i]);
        }

    });

    var headImgInput = document.getElementById('head-img'),
        headImgBox = document.getElementById('head-img-box');
    var headImg = [];
    headImgInput.addEventListener('change',function (e) {
        var file = headImgInput.files;
        headImg.push(file);
        console.log(headImg);
        // console.log(arr[1][0]);
        for(var i=0,file=headImgInput.files;i<file.length;i++){
            var reader = new FileReader();
            reader.onload = function(e){
                console.log(e);
                var data = e.target.result;
                console.log(e.target)
                // var img = document.createElement("img");
                // var odiv = document.createElement('div');
                // odiv.innerText = '删除';
                // img.src=data;
                var img = `
                     <div class="head-img-item">
                        <img src="${data}" alt="">
                        <div class="cancle">删 除</div>
                     </div>
                `;
                // headImgBox.appendChild(img)
                $('#head-img-box').append(img);
            }
            // 以DataURL的形式读取文件:
            reader.readAsDataURL(file[i]);
        }


    })
    $('#head-img-box').on('click','.cancle',function(){
        var index = $(this).parent().index();
        console.log(index);
        headImg.splice(index,1);
        console.log(headImg);
        var headImgItem = document.getElementsByClassName('head-img-item');
        var headImgBox = document.getElementById('head-img-box');
        headImgBox.removeChild(headImgItem[index]);
        console.log(headImgItem)

    })
    //图片上传点击事件触发fn
    function imgUpload(selector,fn){
        if(selector.files.length==0){
            alert('请先选择图片再点击上传')
        }else{
            for(var i=0;i<selector.files.length;i++){
                uploadImg(selector.files[i],fn);
            }
        }
    }

    var contentImgInput = document.getElementById('content-img');
    var contentImgBox = document.getElementById('content-img-box');
    var contentImg = [];
    contentImgInput.addEventListener('change',function () {
        var file = contentImgInput.files;
        contentImg.push(file);
        console.log(contentImg);
        // console.log(arr[1][0]);
        for(var i=0,file=contentImgInput.files;i<file.length;i++){
            var reader = new FileReader();
            reader.onload = function(e){
                console.log(e);
                var data = e.target.result;
                console.log(e.target)
                // var img = document.createElement("img");
                // var odiv = document.createElement('div');
                // odiv.innerText = '删除';
                // img.src=data;
                var img = `
                     <div class="content-img-item">
                        <img src="${data}" alt="">
                        <div class="cancle">删 除</div>
                     </div>
                `;
                // headImgBox.appendChild(img)
                $('#content-img-box').append(img);
            }
            // 以DataURL的形式读取文件:
            reader.readAsDataURL(file[i]);
        }
    })
    $('#content-img-box').on('click','.cancle',function(){
        var index = $(this).parent().index();
        console.log(index);
        contentImg.splice(index,1);
        console.log(contentImg);
        var contentImgItem = document.getElementsByClassName('content-img-item');
        var contentImgBox = document.getElementById('content-img-box');
        contentImgBox.removeChild(contentImgItem[index]);
        console.log(contentImgItem)
    })





    //多图上传
    function allImgUpload(arr,fn){
        if(arr==0){
            alert('请先选择图片再点击上传')
        }else{
            for(var i=0;i<arr.length;i++){
                uploadImg(arr[i][0],fn);
            }
        }
    }


    // 例如：
    // function topImgupload(){
    //         if(fileInput.files.length==0){
    //             alert('请先选择图片再点击上传')
    //         }else{
    //             for(var i=0;i<fileInput.files.length;i++){
    //                 uploadImg(fileInput.files[i],setTopImgUrl);
    //             }
    //         }
    // }


    //图片上传 fn
    function uploadImg(f,fn) {
        var xhr = new XMLHttpRequest();
        var formData = new FormData();
        formData.append('file',f);
        xhr.onreadystatechange = function (e) {
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    // var imgUrl = xhr.responseText;
                    // var topImgUrl = document.getElementById('top-img-url');
                    // topImgUrl.value = imgUrl;
                    fn(xhr.responseText)
                }else {
                    console.log(xhr.responseText);
                }
            }
        }

        xhr.open('POST',
            'https://tzgl.freei.cc/admin_upload',
            // 'https://jzj.freei.cc/admin_upload',
            false);
        xhr.send(formData);
    }
    var headImgUrl = [];
    function setHeadImg(res){
        console.log(res)
        headImgUrl.push('https://tzgl.freei.cc/'+res)
        console.log(headImgUrl);
    }
    var contentImgUrl = [];
    function setContentImg(res){
        console.log(res)
        contentImgUrl.push('https://tzgl.freei.cc/'+res);
        console.log(contentImgUrl);
    }
    $('#upload-top-img').click(function(){
        imgUpload(fileInput,setTopImgUrl);
    })
    $('#head-img-btn').click(function(){
        allImgUpload(headImg,setHeadImg);
    })
    $('#content-img-btn').click(function(){
        allImgUpload(contentImg,setContentImg)
    })


    $('#submit-btn').on('click',function(){
        var $top_img = $('#top-img-url').val();
        var $name = $('#name').val();
        var $price = $('#price').val();
        var $gg = $('#gg').val();
        var headImg = [];
        for(var i=0;i<headImgUrl.length;i++){
            var headImgItem = {
                url:headImgUrl[i],
                alt:''
            }
            headImg.push(headImgItem);
        }
        console.log(headImg);
    })









})
